<template>
  <div class="quitjob">
    <div class="cho">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="按区域筛选">
          <el-select
            size="small"
            @change="areaselected(formInline.area)"
            v-model="formInline.area"
            placeholder="按区域筛选"
          >
            <el-option
              v-for="(item,index) in areacho"
              :key="item+index"
              :value="item.area"
            >{{item.area}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="按项目筛选">
          <el-select
            size="small"
            @change="departmentselected(formInline.project)"
            v-model="formInline.project"
            placeholder="按项目筛选"
          >
            <el-option v-for="(item,index) in selection" :key="item+index" :value="item">{{item}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="date">
          <el-date-picker
            type="month"
            value-format="yyyy-MM"
            @change="getSTime"
            placeholder="选择月份"
            v-model="formInline.date"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="choose">筛选</el-button>
          <el-button type="primary" size="small" @click="chooseall">全部</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="aaa">
        <h4>重点岗位离职分析</h4>
        <el-table :data="quitData" border style="width: 100%">
        <el-table-column prop="jobpost" label="岗位" header-align="center" align="center"></el-table-column>
        <el-table-column prop="people" label="离职人数" header-align="center" align="center" width="120"></el-table-column>
        <el-table-column prop="scale" label="所占比例" header-align="center" align="center" width="120"></el-table-column>
        <el-table-column prop="" label="访谈情况及离职人员述求" header-align="center" align="center"></el-table-column>
        <el-table-column prop="" label="离职原因分析" header-align="center" align="center"></el-table-column>
        <el-table-column prop="" label="主要改善措施" header-align="center" align="center"></el-table-column>
        </el-table>
    </div>

    <div>
        <h4>离职人员层次分析</h4>
        <el-table :data="quitlevel" border style="width: 100%">
            <el-table-column prop="count" label="离职总人数" header-align="center" align="center"></el-table-column>
            <el-table-column label="一线员工" header-align="center" align="center">
                <el-table-column prop="managecount" label="人数" header-align="center" align="center"></el-table-column>
                <el-table-column prop="managescal" label="比例" header-align="center" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="办公室一般管理人员" header-align="center" align="center">
                <el-table-column prop="admincount" label="人数" header-align="center" align="center"></el-table-column>
                <el-table-column prop="adminscal" label="比例" header-align="center" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="部门经理及以上管理人员" header-align="center" align="center">
                <el-table-column prop="usercount" label="人数" header-align="center" align="center"></el-table-column>
                <el-table-column prop="userscal" label="比例" header-align="center" align="center"></el-table-column>
            </el-table-column>
        </el-table>
    </div>

    <div class="aaa">
        <h4>年度离职统计</h4>
        <el-table :data="totalquit" border style="width: 100%">
         <el-table-column prop="monthquit" label="月份" header-align="center" align="center"></el-table-column>
        <el-table-column prop="one_have_staff" label="1月" header-align="center" align="center" ></el-table-column>
        <el-table-column prop="two_have_staff" label="2月" header-align="center" align="center" ></el-table-column>
        <el-table-column prop="three_have_staff" label="3月" header-align="center" align="center"></el-table-column>
        <el-table-column prop="four_have_staff" label="4月" header-align="center" align="center"></el-table-column>
        <el-table-column prop="five_have_staff" label="5月" header-align="center" align="center"></el-table-column>
        <el-table-column prop="six_have_staff" label="6月" header-align="center" align="center"></el-table-column>
        <el-table-column prop="seven_have_staff" label="7月" header-align="center" align="center"></el-table-column>
        <el-table-column prop="eight_have_staff" label="8月" header-align="center" align="center"></el-table-column>
        <el-table-column prop="nine_have_staff" label="9月" header-align="center" align="center"></el-table-column>
        <el-table-column prop="ten_have_staff" label="10月" header-align="center" align="center"></el-table-column>
        <el-table-column prop="eleven_have_staff" label="11月" header-align="center" align="center"></el-table-column>
        <el-table-column prop="twelve_have_staff" label="12月" header-align="center" align="center"></el-table-column>
        </el-table>
    </div>

    <div class="quitsheet">
        <div id="quitjobchart" :style="{width: '40vw', height: '35vh'}"></div>
    </div>
    
  </div>
</template>

<script>
import { get, post } from "../../../utils/axios.tool";
import axios from 'axios'
import Qs from 'qs'
export default {
  data() {
    return {
      formInline: {
        area: "",
        project: "",
        date: ""
      },
      areacho: [],
      activeName: "first",
      quitData: [
        {
          jobpost: "高层",
          people:'',
          scale:''
        },
        {
          jobpost: "部门及以上",
          people:'',
          scale:''
        }
      ],
      quitlevel:[
        {
          count:'',
          usercount:'',
          userscal:'',
          admincount:'',
          adminscal:'',
          managecount:'',
          managescal:'',
        }
      ],
      totalquit:[
        {
          monthquit:'当月期末人数',
          one_have_staff:0,
          two_have_staff:0,
          three_have_staff:0,
          four_have_staff:0,
          five_have_staff:0,
          six_have_staff:0,
          seven_have_staff:0,
          eight_have_staff:0,
          nine_have_staff:0,
          ten_have_staff:0,
          eleven_have_staff:0,
          twelve_have_staff:0
        },
        {
          monthquit:'当月离职人数',
          one_have_staff:0,
          two_have_staff:0,
          three_have_staff:0,
          four_have_staff:0,
          five_have_staff:0,
          six_have_staff:0,
          seven_have_staff:0,
          eight_have_staff:0,
          nine_have_staff:0,
          ten_have_staff:0,
          eleven_have_staff:0,
          twelve_have_staff:0
        }
      ],
      totalrate:{
          monthquit:'当月离职率',
          one_have_staff:'',
          two_have_staff:'',
          three_have_staff:'',
          four_have_staff:'',
          five_have_staff:'',
          six_have_staff:'',
          seven_have_staff:'',
          eight_have_staff:'',
          nine_have_staff:'',
          ten_have_staff:'',
          eleven_have_staff:'',
          twelve_have_staff:''
      },
      dialogVisible:false,
      dialogFormVisible:false,
    };
  },
  methods: {
    handleadd(){
        this.dialogFormVisible = true
    },
    getSTime(val){
        this.formInline.date = val
    },
    areaselected(val) {
      this.formInline.area = val;
      this.formInline.project = '';
    },
    departmentselected(val) {
      this.formInline.project = val;
    },
    choose() {
      this.$axios.get("/usermanage/demission/", this.formInline).then(res => {
        this.quitData[0].people = res.key_position.job_level1[0]
        this.quitData[0].scale = res.key_position.job_level1[1]
        this.quitData[1].people = res.key_position.job_level2[0]
        this.quitData[1].scale = res.key_position.job_level2[1]
        this.quitlevel[0].count = res.count
        this.quitlevel[0].usercount = res.demiss.job_level_a[0]
        this.quitlevel[0].userscal = res.demiss.job_level_a[1]
        this.quitlevel[0].admincount = res.demiss.job_level_b[0]
        this.quitlevel[0].adminscal = res.demiss.job_level_b[1]
        this.quitlevel[0].managecount = res.demiss.job_level_c[0]
        this.quitlevel[0].managescal = res.demiss.job_level_c[1]
        this.drawLine()
      });
    },
    areachoose() {
      let url = "/usermanage/area/";
      this.$axios.get(url).then(res => {
        this.areacho = res.data;
      });
    },
    chooseall(){
        this.formInline.area = ''
        this.formInline.project = ''
        this.formInline.date = ''
        this.getData()
    },
    getData() {
      this.$axios.get('/usermanage/demission/').then(res=>{
        this.quitData[0].people = res.key_position.job_level1[0]
        this.quitData[0].scale = res.key_position.job_level1[1]
        this.quitData[1].people = res.key_position.job_level2[0]
        this.quitData[1].scale = res.key_position.job_level2[1]
        this.quitlevel[0].count = res.count
        this.quitlevel[0].usercount = res.demiss.job_level_a[0]
        this.quitlevel[0].userscal = res.demiss.job_level_a[1]
        this.quitlevel[0].admincount = res.demiss.job_level_b[0]
        this.quitlevel[0].adminscal = res.demiss.job_level_b[1]
        this.quitlevel[0].managecount = res.demiss.job_level_c[0]
        this.quitlevel[0].managescal = res.demiss.job_level_c[1]
        this.drawLine()
      })
      this.$axios.get('/usermanage/year_demission/').then(res=>[
        this.totalquit[1].one_have_staff = res.one_demission,
        this.totalquit[1].two_have_staff = res.two_demission,
        this.totalquit[1].three_have_staff = res.three_demission,
        this.totalquit[1].four_have_staff = res.four_demission,
        this.totalquit[1].five_have_staff = res.five_demission,
        this.totalquit[1].six_have_staff = res.six_demission,
        this.totalquit[1].seven_have_staff = res.seven_demission,
        this.totalquit[1].eight_have_staff = res.eight_demission,
        this.totalquit[1].nine_have_staff = res.nine_demission,
        this.totalquit[1].ten_have_staff = res.ten_demission,
        this.totalquit[1].eleven_have_staff = res.eleven_demission,
        this.totalquit[1].twelve_have_staff = res.twelve_demission,
      ])
      this.$axios.get('/usermanage/year_have_staff/').then(res=>[
        this.totalquit[0].one_have_staff = res.one_have_staff,
        this.totalquit[0].two_have_staff = res.two_have_staff,
        this.totalquit[0].three_have_staff = res.three_have_staff,
        this.totalquit[0].four_have_staff = res.four_have_staff,
        this.totalquit[0].five_have_staff = res.five_have_staff,
        this.totalquit[0].six_have_staff = res.six_have_staff,
        this.totalquit[0].seven_have_staff = res.seven_have_staff,
        this.totalquit[0].eight_have_staff = res.eight_have_staff,
        this.totalquit[0].nine_have_staff = res.nine_have_staff,
        this.totalquit[0].ten_have_staff = res.ten_have_staff,
        this.totalquit[0].eleven_have_staff = res.eleven_have_staff,
        this.totalquit[0].twelve_have_staff = res.twelve_have_staff,
        

        this.totalrate.one_have_staff = `${Math.floor(this.totalquit[1].one_have_staff/(this.totalquit[1].one_have_staff+this.totalquit[0].one_have_staff)*100)}%`=='NaN%'?0:`${(this.totalquit[1].one_have_staff/(this.totalquit[1].one_have_staff+this.totalquit[0].one_have_staff)*100).toFixed(2)}%`,

        this.totalrate.two_have_staff = `${Math.floor(this.totalquit[1].two_have_staff/(this.totalquit[1].two_have_staff+this.totalquit[0].two_have_staff)*100)}%`=='NaN%'?0:`${(this.totalquit[1].two_have_staff/(this.totalquit[1].two_have_staff+this.totalquit[0].two_have_staff)*100).toFixed(2)}%`,
        this.totalrate.three_have_staff = `${Math.floor(this.totalquit[1].three_have_staff/(this.totalquit[1].three_have_staff+this.totalquit[0].three_have_staff)*100)}%`=='NaN%'?0:`${(this.totalquit[1].three_have_staff/(this.totalquit[1].three_have_staff+this.totalquit[0].three_have_staff)*100).toFixed(2)}%`,
        this.totalrate.four_have_staff = `${Math.floor(this.totalquit[1].four_have_staff/(this.totalquit[1].four_have_staff+this.totalquit[0].four_have_staff)*100)}%`=='NaN%'?0:`${(this.totalquit[1].four_have_staff/(this.totalquit[1].four_have_staff+this.totalquit[0].four_have_staff)*100).toFixed(2)}%`,
        this.totalrate.five_have_staff = `${Math.floor(this.totalquit[1].five_have_staff/(this.totalquit[1].five_have_staff+this.totalquit[0].five_have_staff)*100)}%`=='NaN%'?0:`${(this.totalquit[1].five_have_staff/(this.totalquit[1].five_have_staff+this.totalquit[0].five_have_staff)*100).toFixed(2)}%`,
        this.totalrate.six_have_staff = `${Math.floor(this.totalquit[1].six_have_staff/(this.totalquit[1].six_have_staff+this.totalquit[0].six_have_staff)*100)}%`=='NaN%'?0:`${(this.totalquit[1].six_have_staff/(this.totalquit[1].six_have_staff+this.totalquit[0].six_have_staff)*100).toFixed(2)}%`,
        this.totalrate.seven_have_staff = `${Math.floor(this.totalquit[1].seven_have_staff/(this.totalquit[1].seven_have_staff+this.totalquit[0].seven_have_staff)*100)}%`=='NaN%'?0:`${(this.totalquit[1].seven_have_staff/(this.totalquit[1].seven_have_staff+this.totalquit[0].seven_have_staff)*100).toFixed(2)}%`,
        this.totalrate.eight_have_staff = `${Math.floor(this.totalquit[1].eight_have_staff/(this.totalquit[1].eight_have_staff+this.totalquit[0].eight_have_staff)*100)}%`=='NaN%'?0:`${(this.totalquit[1].eight_have_staff/(this.totalquit[1].eight_have_staff+this.totalquit[0].eight_have_staff)*100).toFixed(2)}%`,
        this.totalrate.nine_have_staff = `${Math.floor(this.totalquit[1].nine_have_staff/(this.totalquit[1].nine_have_staff+this.totalquit[0].nine_have_staff)*100)}%`=='NaN%'?0:`${(this.totalquit[1].nine_have_staff/(this.totalquit[1].nine_have_staff+this.totalquit[0].nine_have_staff)*100).toFixed(2)}%`,
        this.totalrate.ten_have_staff = `${Math.floor(this.totalquit[1].ten_have_staff/(this.totalquit[1].ten_have_staff+this.totalquit[0].ten_have_staff)*100)}%`=='NaN%'?0:`${(this.totalquit[1].ten_have_staff/(this.totalquit[1].ten_have_staff+this.totalquit[0].ten_have_staff)*100).toFixed(2)}%`,
        this.totalrate.eleven_have_staff = `${Math.floor(this.totalquit[1].eleven_have_staff/(this.totalquit[1].eleven_have_staff+this.totalquit[0].eleven_have_staff)*100)}%`=='NaN%'?0:`${(this.totalquit[1].eleven_have_staff/(this.totalquit[1].eleven_have_staff+this.totalquit[0].eleven_have_staff)*100).toFixed(2)}%`,
        this.totalrate.twelve_have_staff = `${Math.floor(this.totalquit[1].twelve_have_staff/(this.totalquit[1].twelve_have_staff+this.totalquit[0].twelve_have_staff)*100)}%`=='NaN%'?0:`${(this.totalquit[1].twelve_have_staff/(this.totalquit[1].twelve_have_staff+this.totalquit[0].twelve_have_staff)*100).toFixed(2)}%`,
        this.totalquit.push(this.totalrate),
      ])
    },
    drawLine(){
            // 基于准备好的dom，初始化echarts实例
            let quitjobchart = this.$echarts.init(document.getElementById('quitjobchart'))
            // 绘制图表
            quitjobchart.setOption({
                title: {
                    text: '离职人员分析',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                color:['#09C7F7','#48DD22','#DDB822'],
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['一线员工', '办公室管理人员', '部门及以上经理']
                },
                series: [
                    {
                        name: '人数',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            {value: this.quitlevel[0].managecount, name: '一线员工'},
                            {value: this.quitlevel[0].admincount, name: '办公室管理人员'},
                            {value: this.quitlevel[0].usercount, name: '部门及以上经理'},
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
                    
            });
        }
  },
  mounted() {
    this.getData();
    this.areachoose();
  },
  computed: {
    selection: function() {
      for (var i = 0; i < this.areacho.length; i++) {
        if (this.areacho[i].area == this.formInline.area) {
          return this.areacho[i].project;
        }
      }
    },
  }
};
</script>

<style lang="less">
.quitjob {
    .el-button--mini, .el-button--small{
        margin-right: 40px;
    }
    h4{
        text-align: center;
        margin-top: 30px;
    }
    .quitsheet{
      margin-top: 70px;
    }
}
</style>